<script setup lang="ts">
import '../assets/main.css';
import { useRouter } from 'vue-router';

const router = useRouter();

const params = defineProps({
    title: String, //标题
    back: Boolean,//是否返回
    before_back: Function, //返回前触发
    icon_url: String, //右侧图标的url
    icon_callback: Function //点图标时触发
});

//alert(params.back?"真":"假");

const comeback=()=>{
    //返回
    if(params.before_back){
        if(params.before_back()){
            router.back();
        }else{
            alert('not back');
        }
    }else{
        router.back();
    }
    
}

const icon_click=()=>{
    if(params.icon_callback!=undefined){
        params.icon_callback();
    }
}
</script>

<template>
    <div class="header">
        <div class="header_icon">
            <div v-if="params.back" @click="comeback">
                <img src="../assets/back.png">
            </div>
        </div>
        <label>{{params.title}}</label>
        <div class="header_icon">
            <img v-if="params.icon_url!=undefined" :src="params.icon_url" @click="icon_click">
        </div>
    </div>
</template>

<style scoped>
.header {
    width: 100%;
    height: 3rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background-color: #F59B22;
    z-index: 100;
}
.header_icon{
    width: 2rem;
}
.header_back{
    width: 100%;
    height: 3rem;
    background-color: blueviolet;
}
.header label{
  font-size: larger;
  color: white;
}
.header img{
  width: 25px;
  height: 25px;
  margin-right: 1rem;
}
</style>